<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper-3.2.7.min.css">
	<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/hd.css"/>

    <!-- Demo styles -->
   
 
</head>
<body>
	<!--music-->
	<div id="music">
		<img class="music_bg"  src="image/music.gif"/>
		<img class="music_pic" src="image/music_off.png"/>
	</div>
	<audio  id='bgmusic' src="image/bgmusic.mp3" autoplay="autoplay"></audio>
	
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide one">
				<div id="top" class="ani" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s"><img class="one" src="image/one.jpg"/></div>
            	<div id="bottom" >
            		<img src="image/jiezhi.png" alt="" class="jiezhi ani" swiper-animate-effect="zoomInDown" swiper-animate-duration="1s" swiper-animate-delay="2s"/>
            		<img src="image/womenjiehunla.png" alt="" class="jh ani" swiper-animate-effect="zoomInDown" swiper-animate-duration="1s" swiper-animate-delay="3s"/>
            		<img src="image/2016117.png" alt="" class="rq ani" swiper-animate-effect="fadein" swiper-animate-duration="1s" swiper-animate-delay="3s"/>
            	</div>
            </div>
            <div class="swiper-slide">
            	<div class="top3">
            		<img src="image/246.JPG" class="t3 ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s"/>
            	</div>
            	<div class="top2" >
            		<img src="image/41.jpg" class="t2 ani" swiper-animate-effect="swing" swiper-animate-duration="1.5s" swiper-animate-delay="2s">
            	</div>	
            	
            	
            </div>
            <div class="swiper-slide three">
            	<div class="left ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
            		<img  src="image/two1.jpg"/>
            	</div>
            	<div class="right ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="2.3s">
            		<div class="t">
            			<img class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1s" src="image/two2.jpg"/>
            		
            		<img src="image/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="2.3s"/>
            		<img src="image/t1.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2.8s"/>
            		<img src="image/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="3.8s"/>
            		<img src="image/t2.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="4.3s"/>
            		<img src="image/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="5.3s"/>
            		<img src="image/t3.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="5.8s"/>
            		<img src="image/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="6.8s"/>
            		<img src="image/t4.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="7.3s"/>
            		<img src="image/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="8.3s"/>
            		<img src="image/t5.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="8.8s"/>
            		<img src="image/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="9.8s"/>
                     </div>
            	</div>
            
            </div>
            <div class="swiper-slide">Slide 4</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="js/swiper-3.2.7.min.js"></script>
    <script type="text/javascript">
    	window.onload =function(){
	var music = document.getElementById("music");
	var music_bg = music.getElementsByTagName('img')[0];
	var music_pic = music.getElementsByTagName('img')[1];
	var bgmusic = document.getElementById("bgmusic");
	var music_sta = 1;//1对应旋转状态 2对应静止状态
//	给music区域加鼠标单击事件
	music.onclick = function(){
		if(music_sta==1){
	//		让背景图片隐藏
			music_bg.style.display = 'none';
	//		让旋转的圆形音符停止
			music_pic.style.animation = 'none';
	//		让音乐停止
			bgmusic.pause();
			music_sta=2;
		}else if(music_sta==2){
			music_bg.style.display = 'block';
			music_pic.style.animation = 'm 3s infinite linear';
			bgmusic.play();
			music_sta=1;
			
		}
    	}
}
    </script>
	<script src="js/swiper.animate1.0.2.min.js" type="text/javascript" charset="utf-8"></script>
    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction: 'vertical',
        onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
    swiperAnimateCache(swiper); //隐藏动画元素 
    swiperAnimate(swiper); //初始化完成开始动画
  }, 
  onSlideChangeEnd: function(swiper){ 
    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
  } 
    });
    </script>
    
</body>
</html>











